<template>
  <div>
    <div style='width: 100%;height: 40px'>
      <button @click='draw_line'>绘制线段</button>
      <button @click='draw_image'>绘制图片</button>
      <button @click='draw_save'>保存DWG</button>
    </div>
    <div style="width: 100%;height: 85vh; overflow: hidden;">
      <canvas id="myCanvas"></canvas>
    </div>
  </div>
</template>

<script setup lang="ts">
  import Mx from "mxdraw";
  import * as THREE from 'three';
  import mapIcon from "../assets/image/mapIcon.png";
  //为程序设置服务器地址
  Mx.MxFun.setMxServer("ws://localhost:5090");

  const mxData = "{\"ver\":1,\"view\":{\"ptView1\":{\"x\":-287002.03228640044,\"y\":794826.0647270556,\"z\":0},\"ptView2\":{\"x\":1909895.9269292646,\"y\":-46173.935285191284,\"z\":0}},\"layers\":[{\"type\":3,\"visible\":true,\"name\":\"0\",\"TypeName\":\"MxDbLayerTableRecord\"}],\"groups\":[],\"entitys\":[{\"type\":3,\"color\":16777215,\"renderOrder\":30,\"opacity\":1,\"visible\":true,\"lineWidth\":0,\"lineWidthByPixels\":true,\"dashArray\":0,\"dashRatio\":0,\"layer\":\"0\",\"guid\":\"A33219E3-4442-4F5B-B8FB-1F64E2A2E04E\",\"pt1\":{\"x\":595189.80446114,\"y\":514492.73138964013,\"z\":0},\"pt2\":{\"x\":640958.5119447999,\"y\":560261.4388733001,\"z\":0},\"imagePath\":\"/src/assets/image/mapIcon.png\",\"angle\":0,\"TypeName\":\"MxDbImage\",\"group\":[]}]}"

  const init = () =>{
    Mx.loadCoreCode().then(()=>{
      Mx.MxFun.createMxObject({
        canvasId: "myCanvas", // canvas元素的id
        cadFile: "/demo/buf/mapcad.dwg",
        useWebsocket: false,
        callback: (mxDraw, {
          canvas,
          canvasParent
        }) => {
          // 图纸加载完成
          mxDraw.addEvent("loadComplete", () => {
          });
        },
        isNewFile: true
      });

      // 恢复批注
      Mx.MxFun.getCurrentDraw().loadMxEntityFromJson(mxData)
    });
  };

  // 绘线函数
  async function draw_line() {
    // 实例化线段对象line
    let line = new Mx.MxDbLine()
    const getPoint = new Mx.MrxDbgUiPrPoint()
    const pt1 = await getPoint.go()
    if (!pt1) return
    // 设置线段的起始点
    line.setPoint1(pt1);
    // 设置颜色
    line.setColor(0xFF22);
    // 动态绘制函数
    getPoint.setUserDraw((currentPoint, worldDrawComment) => {
      // 设置线段第二个点位置
      line.setPoint2(currentPoint);
      // 绘制线段对象
      worldDrawComment.drawCustomEntity(line);
    })
    // 将第二次鼠标点击的位置设置为线段的结束点
    const pt2 = await getPoint.go()
    if(!pt2) return
    line.setPoint2(pt2)
    // 获取控件对象并将线段对象line添加到画布中
    Mx.MxFun.getCurrentDraw().addMxEntity(line);
  }

  async function draw_image() {
    // 实例化取点对象
    const getPoint = new Mx.MrxDbgUiPrPoint()
    // 实例化图片对象
    const image = new Mx.MxDbImage()
    const pt1 = await getPoint.go()
    if (!pt1) return
    // 60,40是图片的宽高，单位是屏幕像素.
    const w = Mx.MxFun.screenCoordLong2Doc(40)
    const h = Mx.MxFun.screenCoordLong2Doc(40)
    // 设置点位置
    image.setPoint1(pt1);
    const pt2 = new THREE.Vector3(pt1.x + w, pt1.y + h, pt1.z);
    console.log(pt2)
    image.setPoint2(pt2)
    // 设置图片路径
    image.setImagePath(mapIcon)
    // 获取控件对象并将图片对象image添加到画布中
    Mx.MxFun.getCurrentDraw().addMxEntity(image)
  }

  function draw_save() {
    console.log(Mx.MxFun.getCurrentDraw().saveMxEntityToJson())
  }

  init();
</script>
